<template>
	<view style="margin: 0 27rpx; border-radius: ">
		<view class="head">
			<view class="balance">剩余余额</view>
			<view class="number">{{ money }}</view>
			<view class="line"></view>
			<view class="tal">
				<view class="">
					累计余额
					<span style="color: #fff; padding-left: 15rpx">{{totalmoney}}</span>
				</view>
				<view class="moreSet" @click="onskip('/pages/index/withdrawalAccount')">
					<text>更多设置</text>
					<image src="../../static/gengduoW.png" mode="" class="moreImg"></image>
				</view>
			</view>
			<view class="tixian" @click="withdraw">提现</view>
		</view>
		<view class="select">
			<view class="">
				<u-tabs
					lineHeight="0"
					:list="list1"
					@click="click"
					:activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)',
						backgroundColor: '#fff',
						color: '#196AEB',
						backgroundColor: '#F2F6FD'
					}"
					:inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)',
						backgroundColor: '#fff'
					}"
					itemStyle="textAlign:center; marginRight:30rpx; borderRadius:7rpx; width: '47rpx'; height: 34px; textAlign:center;border:1rpx solid #196AEB"
				></u-tabs>
			</view>
			<view class="time" @click="open">
				<image class="imgae" src="../../static/shaixuan.png" mode="widthFix"></image>
			
				<picker mode="date" :value="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{ date }}</view>
				</picker>

				<!-- <u-button @click="open" style="background-color: #f7f7f7; border: 0;">{{value1}}</u-button> -->

				<!-- <text>提现设置</text>
				<image src="../../static/gengduoW.png" class="imgae" mode=""></image> -->
			</view>
		</view>
		<view class="order">
			<view class="opt" v-for="(item, i) of 3" :key="i">
				<view class="awy">
					<view class="le">订单退款</view>
					<view class="rig">+88</view>
				</view>
				<view class="dataTime">01月23日 17:28</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		var d = new Date();
		var year = d.getFullYear();
		var month = uni.$u.padZero(d.getMonth() + 1);
		var date = d.getDate();

		const currentDate = this.getDate({
			format: true
		});
		return {
			date: '全部',
			money: '',
			totalmoney:'',
			list1: [
				{
					name: '全部'
				}
				// {
				// 	name:'提现'
				// },
				// {
				// 	name:'退款'
				// },
			],
			time: '全部',
			list: [{}],
			show: false,
			value1: '请选择日期'
		};
	},
	onLoad() {
		this.myWallet();
		this.withdrawlog();
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	methods: {
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		bindDateChange: function (e) {
			this.date = e.detail.value;
			this.withdrawlog()
		},
		// 余额
		myWallet() {
			this.$api.get('my/wallet').then((res) => {
				console.log('余额111', res);
				this.money = res.userinfo.money;
				this.totalmoney = res.userinfo.totalmoney
			});
		},
		// 提现记录
		withdrawlog() {
			console.log('字段参数',this.date)
			this.$api.get('my/withdrawlog', { ctime: this.date, pagenum: 1 }).then((res) => {
				console.log('提现记录111', res);
			});
		},
		open() {
			this.show = true;
		},
		close() {
			this.show = false;
		},
		withdraw() {
			uni.navigateTo({
				url: '/pages/index/withdraw'
			});
		},
	
	}
};
</script>

<style lang="scss">
.head {
	// width: 697rpx;
	height: 267rpx;
	background: linear-gradient(0deg, #729de2, #1a69e7);
	border-radius: 20rpx;
	padding: 45rpx;
	color: #fff;
	position: relative;
}
.balance {
	font-weight: 500;
	font-size: 21rpx;
	color: #a7c3ef;
}
.number {
	font-weight: bold;
	font-size: 47rpx;
	color: #ffffff;
	margin-top: 22rpx;
	margin-bottom: 50rpx;
}
.line {
	width: 697rpx;
	height: 1rpx;
	background: #7ca5e5;
}
.tal {
	display: flex;
	justify-content: space-between;
	font-weight: 500;
	font-size: 24rpx;
	color: #afc8ef;
	margin-top: 35rpx;
}
.moreImg {
	width: 11rpx;
	height: 20rpx;
	margin-left: 10rpx;
}
.tixian {
	position: absolute;
	left: 550rpx;
	top: 60rpx;
	width: 113rpx;
	height: 53rpx;
	background: #7da6e6;
	border-radius: 13rpx;
	border: 1px solid #8bb0ea;
	text-align: center;
	line-height: 53rpx;
	font-weight: bold;
	font-size: 27rpx;
	color: #ffffff;
}
.select {
	margin-top: 30rpx;
	display: flex;
	justify-content: space-between;
	padding-bottom: 10rpx;
}
.time {
	display: flex;
	// justify-content: space-between;
}
.riqi {
	font-weight: 500;
	font-size: 24rpx;
	color: #333333;
	margin-top: 20rpx;
}
.imgae {
	width: 40rpx;
	height: 45rpx;
	margin-top: 10rpx;
	margin-right: 10rpx;
}
.order {
	background-color: #f7f7f7;
}
.opt {
	padding: 27rpx 32rpx;

	margin: 20rpx 0;

	background: #ffffff;
	border-radius: 20rpx;
}
.awy {
	display: flex;
	justify-content: space-between;
	// width: 109rpx;
	// height: 25rpx;
	// font-family: PingFang SC;
	font-weight: 500;
	font-size: 27rpx;
	color: #333333;
	margin-bottom: 24rpx;
	.rig {
		font-weight: bold;
		font-size: 29rpx;
		color: #333333;
	}
}
.dataTime {
	font-weight: 500;
	font-size: 21rpx;
	color: #999999;
}
</style>
